<template>
  <el-card style="width: 100%;min-width: 800px;" class="now-day">
    <div class="title">今日数据<span>{{ nowday }}</span></div>
    <div class="data-box">
      <div class="data-card" v-loading.fullscreen.lock="loadingFlag">
        <div class="data-title">营业额</div>
        <div class="detail-data">
          <div class="text">￥<span>{{ IndexData.volume }}</span></div>
        </div>
      </div>
      <div class="data-card">
        <div class="data-title">有效订单</div>
        <div class="detail-data">
          <div class="text"><span style="color: rgba(241, 210, 72, 1);">{{ IndexData.valid_order }}</span>单</div>
        </div>
      </div>
      <div class="data-card">
        <div class="data-title">下单总数</div>
        <div class="detail-data">
          <div class="text"><span style="color: rgb(72, 241, 241);">{{ IndexData.full_order }}</span>单</div>
        </div>
      </div>
      <div class="data-card">
        <div class="data-title">新增用户</div>
        <div class="detail-data">
          <div class="text"><span style="color: rgb(0, 153, 255);">{{ IndexData.new_users }}</span>人</div>
        </div>
      </div>
    </div>
  </el-card>

  <el-card style="width: 100%; min-width: 800px;margin: 10px 0px;" class="now-day">
    <div class="title">数据统计</div>
    <div class="date-btn">
      <el-radio-group @change="uploadEacharts" style="padding: 15px 0px;" v-model="data_range">
        <el-radio-button label="1">周</el-radio-button>
        <el-radio-button label="2">月</el-radio-button>
        <el-radio-button label="3">年</el-radio-button>
      </el-radio-group>
    </div>
    <div class="echart-box">
      <div class="column">
        <div class="echart-title">近期营业额</div>
        <div class="echart" id="e1"></div>
      </div>
      <div class="br"></div>
      <div class="column">
        <div class="echart-title">近期新增用户</div>
        <div class="echart" id="e2"></div>
      </div>
    </div>
  </el-card>
  <el-card style="width: 100%; min-width: 800px;margin: 10px 0px;" class="now-day">
    <div class="title">有效订单</div>
    <el-table :data="validOrderList" stripe style="width: 100%">
      <template #empty>
        <el-empty description="今日无数据"></el-empty>
      </template>
      <el-table-column type="index" width="50" />
      <el-table-column label="订单编号" align="center" width="130">

        <template #default="scope">
          <text><span style="color: rgb(37, 157, 255);">{{ scope.row.serial }}</span></text>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="user_name" label="用户名" min-width="120" />
      <el-table-column align="center" prop="matron_name" label="月嫂" />
      <el-table-column align="center" prop="start_date" min-width="110" label="开始日期" />
      <el-table-column align="center" prop="end_date" min-width="110" label="结束时间" />
      <el-table-column label="服务时长" align="center" min-width="120">

        <template #default="scope">
          <text><span style="">{{ computDay(scope.row.start_date, scope.row.end_date) }}</span>天</text>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" min-width="120">

        <template #default="scope">
          <text>￥<span style="color: red;">{{ scope.row.price }}</span></text>
        </template>
      </el-table-column>
      <el-table-column label="是否付款" min-width="100">

        <template #default="scope">
          <el-button v-if="scope.row.is_pay" size="small" type="primary">已付款</el-button>
          <el-button v-else size="small" type="danger">未付款</el-button>
        </template>
      </el-table-column>
      <el-table-column label="是否服务" min-width="100">

        <template #default="scope">
          <el-button v-if="scope.row.is_sever" size="small" type="primary">已服务</el-button>
          <el-button v-else size="small" type="warning">未服务</el-button>
        </template>
      </el-table-column>
      <el-table-column label="是否评论" min-width="100">

        <template #default="scope">
          <el-button v-if="scope.row.is_comment" size="small" type="primary">已评论</el-button>
          <el-button v-else size="small" type="warning">未评论</el-button>
        </template>
      </el-table-column>


    </el-table>

    <div v-if="validOrderList.length" class="pagination"> <el-pagination background layout="prev, pager, next"
        v-model:current-page="page_data.page_num" v-model:page-size="page_data.page_size"
        :total="page_data.page_count * page_data.page_size" @current-change="currentChange" /></div>
  </el-card>

  <div class="message" :style="msgnum ? `--num:'${msgnum}'`:''">
    <el-button @click="dialogfalg = true;msgnum=0" circle style="width: 60px;height: 60px;" size="large" type="primary"
      plain><el-icon size="30" type="primary">
        <ChatDotRound />
      </el-icon> </el-button>
  </div>
  <el-dialog
  @close="closeChat"
   v-model="dialogfalg" title="Warning" width="700" align-center>

    <template #header>
     <div class="dialog-header">
      <div class="left"></div>
      <div class="title">{{ chatData[Index].nickname }}</div>
     </div>
    </template>
    <div class="message-box">
      <div class="left">
        <div 
        v-for="(item,index) in chatData"
        :key="index"
        class="user-box"
        :class="Index==index ? 'click-user-box':''"
        @click="selectFriend(index)"
        >
          <div class="user-img">
            <img :src="item.img_url" alt="">
          </div>
          <div class="user-info">
            <div class="user-header">
              <div class="user-name">{{ item.nickname }}</div>
              <div v-if="item.msg.length!=0 && item.msg[item.msg.length-1].status==1" class="time">{{ chatTime(item.msg[item.msg.length-1].time) }}</div>
            </div>
            <div v-if="item.msg.length!=0" class="user-msg" :style="item.content ? `--num:'${item.content}'`:''">{{ item.msg[item.msg.length-1].type==5 ? item.msg[item.msg.length-1].message:'[图片]' }}</div>
          </div>
        </div>

      </div>
      <div class="right">
        <div class="msg-box" id="dom">
          <div
          v-for="(mitem,mindex) in chatData[Index].msg"
          :key="mindex"
          :class="mitem.status ? 'msg-row':'send-msg-row'"
          
          >
            <div class="user-img"><img :src="mitem.status ? chatData[Index].img_url:userStore.userinfo.img_url" alt="" class="msg-img"></div>
        
          <template v-if="mitem.type==5">
            <div class="icon"></div>
            <div class="msg">{{ mitem.message }}</div>
          </template>
          <template v-else>
            <div class="img-msg">
              <img class="m-img" @click="preVIewUrl(mitem.message)" :src="mitem.message">
            </div>
          </template>
          </div>

      
        </div>
        <div class="feature">
          <div class="top">
            <el-upload
            ref="uploadRef"
            :action="host"
    :auto-upload="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    v-model:file-list="fileList"
    limit="1"
            >
              <el-icon size="20">
              <PictureFilled />
            </el-icon>
            </el-upload>
          </div>
          <div class="mid">
            <el-input @keyup.enter="sendMessage" v-model="msgInput" :autosize="{ minRows: 4, maxRows: 4 }" textareaStyle="mid-input"
              type="textarea"></el-input>
          </div>
          <div class="footer">
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </div>
        </div>
      </div>

    </div>

  </el-dialog>
  <el-dialog
  v-model="preViewFlag"
  style="display: flex;justify-content: center;"
  >
   <img w-full :src="imageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">

import { ElMessage, INPUT_EVENT } from 'element-plus'
import * as echarts from 'echarts';
import {
  ChatDotRound,
  PictureFilled
} from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import { ref, onMounted,nextTick ,computed} from 'vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
import { getIndexCount, getVolumeUsers, getOrderValid,getFriendListApi } from '@/api/index'
import { Header } from 'element-plus/es/components/table-v2/src/components';
const preViewFlag = ref(false)
const closeChat=()=>{
  console.log(chatData.value.reduce((pre,item)=>{return pre+item.content}));
  msgnum.value = chatData.value.reduce((pre,item)=>{return pre+item.content},0)
}
const chatTime = computed(()=>(time)=>{
 const tdate= time.split(" ")[1].split(":")
 return tdate[0]+":"+tdate[1]
})
const imageUrl = ref('')
const preVIewUrl=(url)=>{
imageUrl.value=url
preViewFlag.value = true

}
const dialogfalg = ref(false)
const msgInput = ref('')
const host = ref('https://www.damer.asia/api/admin/image/')
const uploadRef = ref('')
const selectImg = ref(false)
const fileList = ref([])
const beforeAvatarUpload = (rawFile)=>{
selectImg.value = true
console.log('ok',rawFile);

}
//聊天相关

const handleAvatarSuccess = ( response,uploadFile)=>{
  
if(response.code == 0){
  chatData.value[Index.value].msg.push({
    status:0,
    type:1,
    message:'https://www.damer.asia/'+response.url
  })
  socket.send(JSON.stringify({friend_id:chatData.value[Index.value].friend_id,type:1,message:'https://www.damer.asia/'+response.url}))
const dom = ref(document.getElementById('dom'))
dom.value.scrollTop=dom.value.scrollHeight*2

}
else{
  ElMessage.error('发送失败')
}
fileList.value=[]
}
const Index = ref(0)
const msgnum = ref(0)
const chatData = ref([
  {
    friend_id:1,
    img_url:'https://ts3.cn.mm.bing.net/th?id=OBTQ.BT9B2F7E4B2A69619D072E4CF706D20B4C5A075BC571011A672313C16028F328DB&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM',
    nickname:'张三',
    content:0,
    msg:[
      {
        status:1,
        type:5,
        message:'今天天气真好'
      },
      {
        status:0,
        type:5,
        message:'是的！我发张图片给你看看'
      },
      {
        status:0,
        type:1,
        message:'https://ts2.cn.mm.bing.net/th?id=OBTQ.BT98EF92CBD45F7D58D05E7BDDB3ACC1E0D236E7BB22489DBDBD24634C455D260E&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM'
      },
      {
        status:1,
        type:5,
        message:'今天天气真好'
      },
      {
        status:0,
        type:5,
        message:'是的！我发张图片给你看看'
      },
      {
        status:0,
        type:1,
        message:'https://ts2.cn.mm.bing.net/th?id=OBTQ.BT98EF92CBD45F7D58D05E7BDDB3ACC1E0D236E7BB22489DBDBD24634C455D260E&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM'
      },
      {
        status:1,
        type:5,
        message:'今天天气真好'
      },
      {
        status:0,
        type:5,
        message:'是的！我发张图片给你看看'
      },
      {
        status:0,
        type:1,
        message:'https://ts2.cn.mm.bing.net/th?id=OBTQ.BT98EF92CBD45F7D58D05E7BDDB3ACC1E0D236E7BB22489DBDBD24634C455D260E&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM'
      },
    ]
  },
  {
    friend_id:2,
    img_url:'https://ts3.cn.mm.bing.net/th?id=OBTQ.BT9B2F7E4B2A69619D072E4CF706D20B4C5A075BC571011A672313C16028F328DB&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM',
    nickname:'san三',
    content:1,
    msg:[
    {
        status:1,
        type:1,
        message:'https://ts2.cn.mm.bing.net/th?id=OBTQ.BT98EF92CBD45F7D58D05E7BDDB3ACC1E0D236E7BB22489DBDBD24634C455D260E&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM'
      },
      {
        status:1,
        type:5,
        message:'天气真好'
      },
      {
        status:0,
        type:5,
        message:'是的！我发张图片给你看看'
      },
      {
        status:0,
        type:1,
        message:'https://ts2.cn.mm.bing.net/th?id=OBTQ.BT98EF92CBD45F7D58D05E7BDDB3ACC1E0D236E7BB22489DBDBD24634C455D260E&w=120&h=120&c=1&rs=1&qlt=80&o=6&pid=SANGAM'
      }
    ]
  }
])
const selectFriend = (index)=>{
Index.value = index
chatData.value[index].content = 0
}
const sendMessage=async()=>{
  const dom = ref(document.getElementById('dom'))

  // console.log('ok',msgInput.value);
  if(fileList.value.length){
    uploadRef.value.submit()

    return
  }
  if(!msgInput.value || msgInput.value=='\n')return;
  chatData.value[Index.value].msg.push({
    status:0,
    type:5,
    message:msgInput.value
  })
  socket.send(JSON.stringify({friend_id:chatData.value[Index.value].friend_id,type:5,message:msgInput.value}))
  await nextTick()
  dom.value.scrollTop=dom.value.scrollHeight*2

  msgInput.value = ''

}
onMounted(async()=>{
  await nextTick()
  const dom = ref(document.getElementById('dom'))
  dom.value.scrollTop=dom.value.scrollHeight*2
  // console.log('ff',dom.value.scrollTop,dom.value);
})

//分页相关
const page_data = ref({
  page_num: 1,
  page_size: 10,
  page_count: 0
})
const currentChange = async (num) => {
  page_data.value.page_num = num
  validOrder()

}
const validOrderList = ref([
  {
    user_name: 'damer',
    comment_id: 1,
    user_id: 2,
    matron_id: 3,
    star: 4,
    matron_name: '张三',
    create_date: '2020-09-10',
    serial: '21402903201',
    content: '阿姨真的而非法艰苦拉萨积分卡啦JFK老大家房客了俺看了大家发奥克兰就疯狂垃圾疯狂垃圾弗克拉家房客了的阿克洛夫尔喀里就',
    is_img: false,
    urls: [
      {
        id: 1,
        url: ''
      },
      {
        id: 2,
        url: ''
      }
    ],
    start_date: '2020-02-02',
    end_date: '2021-02-02',
    is_pay: true,
    is_serve: true,
    is_comment: true,
    price: 20000,
  },

])
const computDay = (start, end) => {
  const startDay = new Date(start)
  const endDay = new Date(end)
  console.log((endDay.valueOf() - startDay.valueOf()) / (24 * 60 * 60 * 1000))

  return (endDay.valueOf() - startDay.valueOf()) / (24 * 60 * 60 * 1000)
}
const nowday = ref('xxxx-xx-xx')
const loadingFlag = ref(true)
// 新建一个promise对象
let newPromise = new Promise((resolve) => {
  resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
  //	此dom为echarts图标展示dom
  // 基于准备好的dom，初始化echarts实例
  (function () {
    var myChart = echarts.init(document.getElementById("e1"))

    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter: function (params) {
          return params[0].name + ' : ' + params[0].value + ' 元'
        }
      },
      grid: {
        left: '1%',
        right: '3%',
        bottom: '0%',
        top: '6%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: X_data.value
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '元',
          data: echartData.value.volume_data,
          type: 'line',
          areaStyle: {},
          label: {
            show: true,
            position: 'top'
          },
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  (function () {
    var myChart = echarts.init(document.getElementById("e2"))
    // 绘制图表
    myChart.setOption({

      tooltip: {},
      grid: {
        left: '1%',
        right: '3%',
        bottom: '0%',
        top: '6%',
        containLabel: true
      },
      xAxis: {
        data: X_data.value
      },
      yAxis: {},
      series: [
        {
          name: '个',
          type: 'bar',
          data: echartData.value.users_data
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
})
//   }
//统计图
//更新图表数据
const X_data = ref([])
const uploadEacharts = () => {

  X_data.value = data_range.value == '3' ? ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',] : getPreviousDays(nowday.value, data_range.value == '1' ? 7 : 30)
  console.log(X_data.value);
  VolumeUser()
  loadingFlag.value = false
}
const data_range = ref('1')
const echartData = ref({
  volume_data: [354, 1568, 2156, 2241, 14471, 14774, 1545],
  users_data: [35, 68, 56, 21, 471, 4774, 1545]
})
const IndexData = ref({
  volume: 0,
  valid_order: 0,
  full_order: 0,
  new_users: 0,
})
//获得x轴数据
const getPreviousDays = (startDate, numberOfDays) => {
  const dateList = [];
  const currentDate = new Date(startDate);
  for (let i = 0; i < numberOfDays; i++) {
    const previousDate = new Date(currentDate);
    previousDate.setDate(currentDate.getDate() - i );
    dateList.unshift(previousDate.toISOString().split('T')[0].slice(5));
  }
  return dateList;
}
const VolumeUser = async () => {
  loadingFlag.value = true
  const res = await getVolumeUsers({ data_range: data_range.value })
  // console.log(res)
  echartData.value.volume_data = res.data.volume_data
  echartData.value.users_data = res.data.users_data
  console.log(echartData.value);

  (function () {
    var myChart = echarts.init(document.getElementById("e1"))

    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter: function (params) {
          return params[0].name + ' : ' + params[0].value + ' 元'
        }
      },
      grid: {
        left: '1%',
        right: '3%',
        bottom: '0%',
        top: '6%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: X_data.value
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '元',
          data: echartData.value.volume_data,
          type: 'line',
          areaStyle: {},
          label: {
            show: true,
            position: 'top'
          },
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  (function () {
    var myChart = echarts.init(document.getElementById("e2"))
    // 绘制图表
    myChart.setOption({

      tooltip: {},
      grid: {
        left: '1%',
        right: '3%',
        bottom: '0%',
        top: '6%',
        containLabel: true
      },
      xAxis: {
        data: X_data.value
      },
      yAxis: {},
      series: [
        {
          name: '个',
          type: 'bar',
          data: echartData.value.users_data
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
}
const IndexCount = async () => {
  const res = await getIndexCount();
  // console.log('index', res);
  IndexData.value = res.data



}
const validOrder = async () => {
  const res = await getOrderValid(page_data.value)
  page_data.value.page_count = res.data.count
  validOrderList.value = res.data.list
}
const getFriendList = async ()=>{
  const res = await getFriendListApi()
  //  console.log('okk',res);
  chatData.value=res.data.map(item=>{return {...item,msg:[],content:0}})

  
}


(function () {
  loadingFlag.value = true
  const Time = new Date()
  nowday.value = Time.getFullYear() + '-' + (Time.getMonth() + 1) + '-' + Time.getDate()
  X_data.value = data_range.value == 3 ? ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',] : getPreviousDays(nowday.value, data_range.value == 1 ? 7 : 30)
  console.log(getPreviousDays(nowday.value, data_range.value == 1 ? 7 : 30));
  VolumeUser()
  IndexCount()
  validOrder()
  getFriendList()
  loadingFlag.value = false
  
})();
console.log(userStore.token);

var socket=new WebSocket('wss://www.damer.asia/chat/?token='+userStore.token);
socket.onopen=(e)=>{
  console.log('conents',e);

}
socket.onmessage=async (e)=>{
console.log('accept',e);
const res = JSON.parse(e.data)
const dom = ref(document.getElementById('dom'))

if(res.constructor ==Array){

  chatData.value.map((item,index)=>{
    if(item.friend_id==res[0].friend_id)
    {
      res.map((ritem,rindex)=>{
        chatData.value[index].msg.push({...ritem,status:1});
        msgnum.value+=1
        
      if(Index.value!=index){chatData.value[index].content+=1}
      })
    }})

}
else{
  
chatData.value.map((item,index)=>{if(item.friend_id==res.friend_id){chatData.value[index].msg.push({...res,status:1});if(Index.value!=index){chatData.value[index].content+=1}}})
msgnum.value+=1
await nextTick()
  dom.value.scrollTop=dom.value.scrollHeight*2
}
console.log(chatData.value);

}
</script>

<style lang="scss">
* {
  user-select: none;
}

:deep(.el-textarea_inner) {
  outline: none;
  border: 0;
  resize: 0;
  box-shadow: 0;

}
.dialog-header{
    height: 100%;
    display: flex;
    align-items: center;
    .left{
      height: 20px;
      min-width: 200px;
    }
    .title{
      flex-grow: 1;
      text-align: center;
      letter-spacing: 0.06em;
      font-weight: 550;
    }
  }
.message-box {
  display: flex;
  width: 100%;
  height: 520px;
  background-color: #fff;

  .left {
    height: 100%;
    min-width: 200px;
    overflow: auto;
    &::-webkit-scrollbar{
      display: none;
    }
    // background-color: aqua;
    border-right: 1px solid rgba(0, 0, 0, .1);

    .user-box {
      display: flex;
      align-items: center;
      height: 60px;

      .user-img {
        height: 40px;
        width: 40px;
        overflow: hidden;
        margin: 0px 13px;
        border-radius: 50%;
        object-fit: cover;
        background-color: aqua;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .user-info {
        .user-header {
          display: flex;
          align-items: center;

          .user-name {
            width: 90px;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            line-height: 20px;
            color: black;
            font-weight: 500;
            font-size: 14px;
          }

          .time {
            font-size: 13px;
          }
        }

        .user-msg {
          position: relative;
          width: 125px;
          height: 18px;
          font-size: 13px;
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-wrap: nowrap;
          &::after{
            content: var(--num);
            position: absolute;
            right: 0;
            width: 16px;
            height: 16px;
            color: #fff;
            text-align: center;
            line-height: 16px;
            border-radius: 50%;
            background-color: red;
          }
        }
      }
    }

    .click-user-box {
      background-color: #ebeae3;

    }
  }

  .right {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    
    .msg-box {
      padding: 10px 0 0px;
      min-width: 350px;
      overflow: auto;
      flex-grow: 1;
      &::-webkit-scrollbar{
        display: none;
      }
      .msg-row {
        display: flex;
        margin: 0 12px;
        margin-bottom: 12px;

        .user-img {
          width: 30px;
          height: 30px;
          min-height: 30px;
          min-width: 30px;
          object-fit: cover;
          overflow: hidden;
          border-radius: 50%;
          background-color: aqua;

          .msg-img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }

        .icon {
          position: relative;
          width: 10px;
          height: 30px;

          &::after {
            content: ' ';
            position: absolute;
            top: 50%;
            height: 0;
            width: 0;
            border: 5px solid rgba(0, 0, 0, 0);
            border-right: 5px solid #e5e5e5;
            transform: translateY(-5px);
          }
        }

        .msg {

          max-width: 355px;
          padding: 5px;
          border-radius: 5px;
          background-color: #e5e5e5;
        }
      }

      .send-msg-row {
        display: flex;
        flex-direction: row-reverse;
        margin: 0 12px;
        margin-bottom: 12px;

        color: #fff;

        .user-img {

          width: 30px;
          height: 30px;
          min-height: 30px;
          min-width: 30px;
          object-fit: cover;
          overflow: hidden;
          border-radius: 50%;
          background-color: aqua;

          .msg-img {
            height: 100%;
            width: 100%;
          }
        }

        .icon {
          position: relative;
          width: 10px;
          height: 30px;

          &::after {
            content: ' ';
            position: absolute;
            top: 50%;
            height: 0;
            width: 0;
            border: 5px solid rgba(0, 0, 0, 0);
            border-left: 5px solid #12b7f5;
            transform: translateY(-5px);
          }
        }

        .msg {

          max-width: 355px;
          padding: 5px;
          border-radius: 5px;
          background-color: #12b7f5;
        }
       
      }
      .img-msg{
          max-width: 250px;
          max-height: 250px;
          min-width: 100px;
          min-height: 100px;
          overflow: hidden;
          border-radius: 10px;
          margin: 0 10px;
          .m-img{
            height: 100%;
            width: 100%;
            object-fit: cover;

          }
        }
    }

    .feature {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 175px;
      max-height: 175px;
      .top {
        display: flex;
        align-items: center;
        margin: 5px 10px;
      }

      .mid {
        flex-grow: 1;

        .mid-input {
          border: none;
        }

        & .el-textarea_inner {

          border: none;

        }

      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 5px 0px;
      }
    }
  }
}

.message {

  z-index: 99;
  position: absolute;
  right: 40px;
  top: 50%;

  &::after {
    position: absolute;
    z-index: 4;
    width: 20px;
    height: 20px;
    right: 7px;
    content: var(--num);
    color: #fff;
    text-align: center;
    line-height: 20px;
    background-color: red;
    border-radius: 50%;
    transform: translateY(5px);
  }
}

.now-day {

  .title {
    font-size: 20px;
    font-weight: 550;
    border-bottom: 0.5px solid rgba(0, 0, 0, .7);
    padding: 0px 0px 10px 0px;
    letter-spacing: 0.09em;

    span {
      margin: 0px 10px;
      color: rgba(0, 0, 0, .4);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }
  }

  .data-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-width: 800px;
    padding: 20px 10px;

    .data-card {
      position: relative;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      width: 100%;
      min-width: .8*150px;
      max-width: 200px;
      margin: 10px;
      border-radius: 10px;
      letter-spacing: 0.05em;

      &::after {
        content: '';
        padding-top: 100%;
      }

      .data-title {
        position: absolute;
        width: 100%;
        padding: 13px 0px 0px 10px;
        font-size: 16px;
        color: #fff;
        font-weight: 450;
        letter-spacing: 0.12em;
      }

      .detail-data {
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-grow: 1;
        text-align: center;
        font-size: 20px;

        .text {
          transform: translateY(-8px);

          span {
            color: red;
            font-size: 30px;
            font-weight: 550;
          }

        }

      }
    }

    // $color-list:rgb(248, 164, 55),rgb(27, 214, 3),rgb(55, 155, 248),rgb(225, 49, 248);
    .data-card:nth-child(1) {
      background-color: rgb(248, 164, 55);
    }

    .data-card:nth-child(2) {
      background-color: rgb(27, 214, 3);
    }

    .data-card:nth-child(3) {
      background-color: rgb(55, 155, 248);
    }

    .data-card:nth-child(4) {
      background-color: rgb(225, 49, 248);
    }
  }

  // @each $color in $color-list {
  //   $index:index($color-list,$color);
  //   .data-card:nth-child($index){
  //     background-color: $color;
  //   }
  // };
  .pagination {
    display: flex;
    justify-content: center;
    padding: 40px 0px;
  }

  .echart-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-width: 960px;

    .br {
      min-width: 3px;
      height: 250px;
      margin: 0 20px;
      border-radius: 20px;
      background-color: black;
    }

    .column {
      display: flex;
      width: 100%;
      min-width: 480px;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      flex-grow: 1;

      .echart-title {
        width: 91%;
        letter-spacing: 0.05em;
        font-size: 17px;
        font-weight: 550;
      }

      .echart {
        width: 72%;
        aspect-ratio: 450/300;
        min-width: 450px;
        min-height: 315px;
      }

      .column:nth-child(1) {}
    }
  }

}
</style>
